<template>
  <div>
    <div class="toolbar">
      <el-form :inline="true" :model="q" size="mini">
        <el-form-item label="组员名称:">
          <el-select v-model="q.name" filterable placeholder="请选择">
            <el-option v-for="item in stafflist" :key="item.id" :label="item.name" :value="item.name" />
          </el-select>
        </el-form-item>
        <el-form-item label="关联组长:">
          <el-select v-model="q.superior" filterable placeholder="请选择">
            <el-option v-for="item in leaderlist" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="query">查询</el-button>
          <el-button type="danger" @click="reload">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-row type="flex" class="row-bg btn-row" justify="end">
      <el-button size="mini" @click="add" type="primary" icon="el-icon-plus" v-if="isManager">添加组员</el-button>
    </el-row>
    <el-table :data="listData.items" v-loading.body="listLoading" @sort-change="sortlist" size="mini" stripe border fit highlight-current-row>
      <el-table-column prop="id" label="组员ID"></el-table-column>
      <el-table-column prop="name" label="组员名称"></el-table-column>
      <el-table-column prop="password" label="登录密码"></el-table-column>
      <el-table-column prop="superior" label="关联上级"></el-table-column>
      <el-table-column prop="description" label="备注"></el-table-column>
      <el-table-column label="操作" width="240" >
        <template slot-scope="scope">
          <div>
            <el-button type="success" size="mini" @click="addchn(scope.row)">添加渠道</el-button>
            <el-button type="primary" size="mini" @click="update(scope.row)">编辑</el-button>
            <el-button type="danger" size="mini" @click="remove(scope.row)">删除</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination  @size-change="handleSizeChange" @current-change="handleCurrentChange"
                      :current-page="q.page_no" :page-sizes="$store.state.app.pageSizeArr"
                      :page-size="q.page_size"
                      layout="total, sizes, prev, pager, next, jumper"
                      :total="listData.total" />
    </div>
    <save-update v-if="showUpdate" :showUpdate.sync="showUpdate" :Detail="Detail" :leaderlist="leaderlist"></save-update>
    <add-chn v-if="showAddchn" :showUpdate.sync="showAddchn" :Detail="Detail" :leaderlist="listData.items" :show_id="show_id"></add-chn>
  </div>
</template>

<script>
  import saveUpdate from './saveUpdate'
  import addChn from './../chnList/saveUpdate'
  import { UserModule } from '@/store/modules/user'
  import { getUserInfoList, getChnOptions, deleteUserInfo} from '@/api'
  import {queryFilter} from '@/utils/patch'
  export default {
    components: {saveUpdate, addChn},
    data() {
      return {
        listData: {},
        q: {page_size: 30, page_no: 1, role_type: 16},
        listLoading: false,
        showUpdate: false,
        showAddchn: false,
        show_id: null,
        leaderlist: [],
        stafflist: [],
        managerlist: [],
        staffArray: [],
        leaderArray: [],
        managerArray: [],
        Detail: {role_type: 16},
        isManager: false,
      }
    },
    mounted(){
      this.getList()
    },
    created(){
      this.getStaffsList()
      this.getLeadersList()
      this.getManagerList()
    },
    deactivated(){
      this.listLoading = false
    },
    methods: {
      add(){
        this.show_id = null
        this.Detail = {role_type: 16}
        this.showUpdate = true
      },
      update(row){
        this.Detail = row
        this.showUpdate = true
      },
      remove(row){
        this.$confirm(`若删除组员，则组长下的渠道会自动分配到该组员的上级，可先完成该组员下的渠道重新分配工作，再进行删除！确认删除ID为${row.id}的项么？`, '删除组长', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteUserInfo(row.id).then(res => {
            if(res.status === 0){
              this.$message({ type: 'success', message: '删除成功!' })
              this.getList()
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      addchn(row){
        this.show_id = row.id
        this.Detail = {names: [{value: ''}], only_android: false}
        this.showAddchn = true
      },
      query(){
        this.q = Object.assign(this.q, {page_no: 1, page_size: 30})
        this.getList()
      },
      reload() {
        this.q = {page_size: 30, page_no: 1, role_type: 16}
        this.isManager = false
        this.getList()
      },
      sortlist(sort){
        this.q.$orderby = sort.prop
        this.getList()
      },
      handleSizeChange (val) {
        this.q.page_size = val
        this.getList()
      },
      handleCurrentChange (val) {
        this.q.page_no = val
        this.getList()
      },
      getLeadersList(){
        getChnOptions({data_type: 'leader'}).then(res => {
          if(res.status === 0){
            this.leaderlist = res.data
            this.leaderlist.map(item => {
              this.leaderArray[item.id] = item.name
            })
          }
        })
      },
      getManagerList(){
        getChnOptions({data_type: 'manager'}).then(res => {
          if(res.status === 0){
            this.managerlist = res.data
            this.managerArray = []
            this.managerlist.map(item => {
              this.managerArray.push(item.name)
            })

            for(let i=0; i<this.managerlist.length; i++) {
              if(this.managerlist[i]['name'] === UserModule.name || UserModule.name === 'groupAdmin') {
                this.isManager = true
              }
            }
          }
        })
      },
      getStaffsList(){
        getChnOptions({data_type: 'staff'}).then(res => {
          if(res.status === 0){
            this.stafflist = res.data
            this.stafflist.map(item => {
              this.staffArray[item.id] = item.name
            })
          }
        })
      },
      getList(){
        let queryObj = queryFilter(this.q)
        getUserInfoList(queryObj).then(res => {
          if(res.status === 0){
            this.listLoading = false
            this.listData = res.data
          }
        })
      }
    },
    watch: {
      showUpdate() {
        if(!this.showUpdate){
          this.getList()
        }
      }
    }
  }
</script>
